import type { Component } from 'vue'
import { h } from 'vue'

import { Icon } from './Icon'

import CardTitle from './CardTitle'

import ConfigGlobal from './ConfigGlobal'

import ContentWrap from './ContentWrap'

import { CropperImage, CropperAvatar } from './Cropper'

import { Descriptions, DescriptionsItemLabel } from './Descriptions'

import { Dialog, ValidErrorDialog } from './Dialog'

import DictTag from './DictTag'
// import DiyEditor from './DiyEditor'
import DocAlert from './DocAlert'
import EAdvancedFilter from './eAdvancedFilter'
import EButton from './eButton'
import EChart from './Echart'

import EConfirmDialog from './eConfirmDialog'
import EContent from './eContent'
import EContentWrap from './eContentWrap'
import ECustomTable from './eCustomTable'
import ECustomTabPane from './eCustomTabPane'
import EDetailContent from './eDetailContent'
import Editor from './Editor'

import EFilterSearch from './eFilterSearch'
import ERemoteSelect from './eRemoteSelect'
import Error from './Error'
import ESearchForm from './eSearchForm'
import EUpdateCreators from './eUpdateCreators'
import Form from './Form'
import { createImageViewer, ImageViewer } from './ImageViewer'
import InputPassword from './InputPassword'
import Pagination from './Pagination'
import RouterSearch from './RouterSearch'
import Search from './Search'
import SummaryCard from './SummaryCard'

import { Table, TableSelectForm } from './Table'

import { UploadImg, UploadImgs, UploadFile } from './UploadFile'
import DynamicComponent from './DynamicComponent'

import {  
  // ElButton,
  // ElDialog,
  ElInput,
  ElInputNumber, 
  ElSelect,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRadioButton,
  ElCheckbox,
  ElCheckboxGroup,
  ElSwitch,
  ElDatePicker,
  ElTimePicker,
  ElTimeSelect,
  ElCascader,
  ElRate,
  ElSlider,
  ElDivider,
  ElUpload,
  ElTransfer,
  ElColorPicker,
  ElAutocomplete,
  ElCard
} from 'element-plus'

type FormItemType =
  | 'Input'
  | 'InputNumber'
  | 'Select'
  | 'RadioGroup'
  | 'CheckboxGroup'
  | 'Switch'
  | 'DatePicker'
  | 'TimePicker'
  | 'TimeSelect'
  | 'Cascader'
  | 'Slider'
  | 'Transfer'
  | 'Upload'
  | 'ColorPicker'
  | 'Rate'
  | 'Divider'
  | 'Autocomplete'
  | 'Card'
  | (string & {})

// 扩展Window类型
declare global {
  interface Window {
    ElementPlus?: Record<string, Component>
  }
}

/**
 * 动态获取Element Plus组件
 */
function getElementPlusComponent(name: string): Component | null {
  try {
    // 尝试从全局变量获取
    if (typeof window !== 'undefined' && window.ElementPlus) {
      return window.ElementPlus[name] || null
    }
    
    // 尝试通过import获取
    if (typeof require !== 'undefined') {
      const ElementPlus = require('element-plus')
      return ElementPlus[name] || null
    }
    
    return null
  } catch (error) {
    console.warn(`无法加载Element Plus组件: ${name}`, error)
    return null
  }
}

/**
 * 懒加载Element Plus组件的代理
 */
function createElementPlusProxy(componentName: string): Component {
  console.log(componentName,'componentName')
  return {
    name: `ElementPlus${componentName}Proxy`,
    setup(props, { slots }) {
      const ElementComponent = getElementPlusComponent(componentName)
      console.log(ElementComponent,'ElementComponent')
      if (!ElementComponent) {
        console.error(`Element Plus组件 ${componentName} 未找到。请确保已安装并正确引入 element-plus。`)
        return () => null
      }
      
      return () => {
        return h(ElementComponent, props, slots)
      }
    }
  }
}

// 组件映射表
const componentMap = new Map<FormItemType | string, Component>()


const components: Record<string, Component> = {
  // ElButton,
  // ElDialog,
  ElInput,
  ElInputNumber, 
  ElSelect,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRadioButton,
  ElCheckbox,
  ElCheckboxGroup,
  ElSwitch,
  ElDatePicker,
  ElTimePicker,
  ElTimeSelect,
  ElCascader,
  ElRate,
  ElSlider,
  ElDivider,
  ElUpload,
  ElTransfer,
  ElColorPicker,
  ElAutocomplete,
  ElCard,    


  Icon,
  CardTitle,
  ConfigGlobal,
  ContentWrap,
  CropperImage,
  CropperAvatar,
  Descriptions,
  DescriptionsItemLabel,
  Dialog,
  ValidErrorDialog,
  EButton,
  DictTag,
  DocAlert,
  EAdvancedFilter,
  EChart,
  EConfirmDialog,
  EContent,
  EContentWrap,
  ECustomTable,
  ECustomTabPane,
  EDetailContent,
  Editor,
  EFilterSearch,
  ERemoteSelect,
  Error,
  ESearchForm,
  EUpdateCreators,
  Form,
  ImageViewer,
  InputPassword,
  Pagination,
  RouterSearch,
  Search,
  SummaryCard,
  Table,
  TableSelectForm,
  UploadImg,
  UploadImgs,
  UploadFile,
  DynamicComponent,
}

// 注册自定义组件到映射表
Object.keys(components).forEach(name => {
  const shortName = name.replace('El', '')
  componentMap.set(shortName, components[name])
})

// 组件映射管理函数
function componentMapRegister<T extends string, R extends Component>(
  compName: FormItemType | T,
  component: R
) {
  componentMap.set(compName, component)
}

function componentMapDel<T extends string>(compName: FormItemType | T) {
  componentMap.delete(compName)
}

function componentMapGet<T extends string>(compName: FormItemType | T): Component | undefined {
  return componentMap.get(compName)
}

function componentMapHas<T extends string>(compName: FormItemType | T): boolean {
  return componentMap.has(compName)
}

console.log(componentMap,'componentMap')

export { componentMapRegister, componentMapGet, componentMapHas, componentMapDel, componentMap } 